<template>
  <div class="box hide-scroller-bar">
    <div>
      <div class="title-box">
        <div class="title" v-if="config.basic && config.basic.system_name">
          {{
            aiTxt
              ? config.basic.system_name.slice(0, -2)
              : config.basic.system_name
          }}
          <span>{{ aiTxt ? aiTxt : "AI" }}</span>
        </div>
        <div class="sub-title">AI灵感绘画 <br />使用指南</div>
        <div class="introduction">
          全方位教学攻略 &nbsp;&nbsp; 0基础生成AI画作
        </div>
      </div>
      <img style="width: 100%; height: 100%" src="../../common/image/u8.png" />
      <div style="background: #000; padding: 20px 0" />

      <div class="help">
        <div class="help-text">AI绘画能帮助哪些群体</div>
        <img src="../../common/image/icon_lin.png" />
      </div>
      <div class="group">
        <a-row :gutter="[16, 16]">
          <a-col :span="8">
            <a-card class="card">
              <a-row>
                <a-col
                  >如果您是<span class="link-color">专业艺术家和设计师</span>
                  ，AI绘 画可以提供更多的创作思路和灵感，
                  同时提高其生产效率，快速地生成多 样化的创意和设计方案。
                </a-col>
              </a-row>
            </a-card></a-col
          >
          <a-col :span="8">
            <a-card class="card" style="padding-bottom: 32px">
              <a-row>
                <a-col
                  >如果您是<span class="link-color">运营/编辑/作者</span
                  >，可以通过AI绘画技术获得更为出色的创意和设计方案，来吸引读者或者顾客的眼球和兴趣。
                </a-col>
              </a-row>
            </a-card></a-col
          >
          <a-col :span="8">
            <a-card class="card">
              <a-row>
                <a-col
                  >如果您是不具备或缺乏艺术技能的<span class="link-color"
                    >绘画爱好者</span
                  >，AI绘画技术可以让其轻松地制作出高质量的画作，发挥其美术
                  创造力和个性。
                </a-col>
              </a-row>
            </a-card></a-col
          >
        </a-row>
      </div>
      <div class="help">
        <div class="help-text">如何生成AI画作</div>
        <img src="../../common/image/icon_lin.png" />
      </div>
      <div class="painting">
        <a-row :wrap="false" align="middle">
          <a-col>
            <img class="image-right" src="../../common/image/u100.png" />
          </a-col>
          <a-col>
            <div class="text">
              <span class="text-right">通过创意描述生成</span>
              <img src="../../common/image/icon_txt.png" />
            </div>
            <div class="describe">
              描述词（Prompt）是AI绘画的咒语，通过关键词或语句，描述您想
              象的画面，引导AI按照您的创意作画。
            </div>
            <div class="describe">
              暴雨天气，面容精致的女生，穿着欧洲华丽的礼服，绿色且神秘的眼
              睛，凌乱飞舞的长发，站在窗前，绿色枫叶发饰，上半身
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="painting">
        <a-row :wrap="false" align="middle">
          <a-col>
            <div class="text">
              <span class="text-right">通过图片生成</span>
              <img src="../../common/image/u10.png" />
            </div>
            <div class="describe">
              根据上传的图片进行重新创作，AI绘图通过关键词、标准和画质等内容
              产出相似的画作。
            </div>
          </a-col>
          <a-col>
            <img class="image-left" src="../../common/image/u151.png" />
          </a-col>
        </a-row>
      </div>
      <div style="background: #000; padding: 20px 0" />
      <div class="help">
        <div class="become-text">如何成为prompt大师 一起玩转绘画魔法</div>
        <img src="../../common/image/icon_lin.png" />
      </div>
      <div style="background: #000; padding: 20px 0" />
      <div class="basic-structure">
        <div class="text basic">描述词基本结构</div>
        <img src="../../common/image/icon_lin.png" />
      </div>
      <div class="basic-structure basic-structure-list">
        <a-space>
          <div class="list">画面主体</div>
          <div class="icon">+</div>
          <div class="list bg-skyblue">场景描述词</div>
          <div class="icon">+</div>
          <div class="list bg-blue">画质描述词</div>
        </a-space>
      </div>
      <div class="group">
        <a-row :gutter="[24, 16]">
          <a-col :span="8">
            <a-card class="card">
              <template #cover>
                <img class="image" src="../../common/image/u141.jpg" />
              </template>
              <a-card-meta>
                <template #description>
                  <a-row class="description" :wrap="false">
                    <a-col :span="4" class="left">主体</a-col>
                    <a-col class="padding-right30"
                      >一个非常可爱的女孩，可爱的化身,动漫风格，柔和的调色板,虚幻引擎背景
                    </a-col>
                  </a-row>
                  <div style="margin: 73px 0"></div>
                  <a-row class="description" :wrap="false">
                    <a-col :span="4" class="left left-bg-skyblue">场景</a-col>
                    <a-col>自然光，餐厅，壁纸 </a-col>
                  </a-row>
                  <a-row class="description" :wrap="false">
                    <a-col :span="4" class="left left-bg-green">画质</a-col>
                    <a-col>完整的构图 </a-col>
                  </a-row>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card class="card">
              <template #cover>
                <img class="image" src="../../common/image/u20.jpg" />
              </template>
              <a-card-meta>
                <template #description>
                  <a-row class="description" :wrap="false">
                    <a-col :span="4" class="left">主体</a-col>
                    <a-col class="padding-right30"
                      >一个迷人的赤壁女孩，有着动漫风格的眼睛，摆出姿势拍摄肖像，她复杂的头发被完美地渲染了出来。
                    </a-col>
                  </a-row>
                  <div style="margin: 16px 0"></div>
                  <a-row class="description" :wrap="false">
                    <a-col :span="4" class="left left-bg-skyblue">场景</a-col>
                    <a-col>光晕，房屋，微光 </a-col>
                  </a-row>
                  <a-row class="description" :wrap="false">
                    <a-col :span="4" class="left left-bg-green">画质</a-col>
                    <a-col>完整的构图 </a-col>
                  </a-row>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card class="card">
              <template #cover>
                <img class="image" src="../../common/image/u21.jpg" />
              </template>
              <a-card-meta>
                <template #description>
                  <a-row class="description" :wrap="false">
                    <a-col :span="4" class="left">主体</a-col>
                    <a-col class="padding-right30"
                      >一个可爱的卡通女孩站在外面的雪地里，傍晚的灯光，夕阳，边缘的灯光，景深，手里拿着一杯热咖啡。
                    </a-col>
                  </a-row>
                  <div style="margin: 16px 0"></div>
                  <a-row class="description" :wrap="false">
                    <a-col :span="4" class="left left-bg-skyblue">场景</a-col>
                    <a-col>树木，下雪，房屋，可爱 </a-col>
                  </a-row>
                  <a-row class="description" :wrap="false">
                    <a-col :span="4" class="left left-bg-green">画质</a-col>
                    <a-col>完整的构图 </a-col>
                  </a-row>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <div class="basic-structure">
        <div class="text weight">描述词权重</div>
        <img src="../../common/image/line.png" />
      </div>
      <div class="group" style="padding-top: 20px">
        <a-row :gutter="[48, 16]">
          <a-col :span="24">
            <a-card class="card">
              <a-card-meta>
                <template #description>
                  <a-row>
                    <a-col class="weight"
                      >越靠前的描述词权重越高，越往后越低。应该把最关键的词在开头描述，按照以下顺序
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-col class="sort-list">
                      <a-space>
                        <div class="main">主体</div>
                        <div class="left">></div>
                        <div class="particulars">主体细节</div>
                        <div class="left">></div>
                        <div class="scene">场景</div>
                        <div class="left">></div>
                        <div class="scene-details">场景细节</div>
                        <div class="left">></div>
                        <div class="picture-quality">画质</div>
                      </a-space>
                    </a-col>
                  </a-row>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <div class="basic-structure">
        <div class="text study">学习一些描述及术语</div>
        <img src="../../common/image/line.png" />
      </div>
      <div class="group" style="padding-top: 20px">
        <a-row :gutter="[48, 16]">
          <a-col :span="24">
            <a-card class="card">
              <a-card-meta>
                <template #description>
                  <a-row class="study-list" :gutter="[16, 100]">
                    <div class="particulars-icon">细节</div>
                    <div class="particulars-icon particulars-icon2">细节</div>
                    <div class="particulars-icon particulars-icon3">参数</div>
                    <a-col :span="12">
                      <div>
                        <span class="border-bottom">光线:</span>
                        &nbsp; 柔和、环状、霓虹、全局照明、自然光、高
                        对比度、黄昏、边缘灯、背光照明、梦幻雾气
                      </div>
                      <div style="margin: 15px 0">
                        <span class="border-bottom">环境:</span> &nbsp;
                        室内、室外、太空、街景、未来都市、星空 森林、草
                        原草地、魔幻森林、神话世界、干净背景
                      </div>
                      <div>
                        <span class="border-bottom">材料:</span> &nbsp;
                        棉、羊绒、像木、黄铜、石灰岩、宝石、钻石
                      </div>
                    </a-col>
                    <a-col :span="12">
                      <div>
                        <span class="border-bottom">艺术风格:</span>
                        &nbsp;
                        3D渲染、电影海报、抽象画、插画、油画、摄影、水彩素描、水墨画、雕塑、拼贴、漫画
                      </div>
                      <div style="margin: 15px 0">
                        <span class="border-bottom">视觉镜头:</span> &nbsp;
                        微距、长焦、移轴、鸟瞰、顶视、卫星视图、仰视产品视角、特写镜头、太空视角、第一人称视角、微视图
                      </div>
                      <div>
                        <span class="border-bottom">艺术家:</span> &nbsp;
                        毕加索、达利、奈良美智、吉卜力工作室、新海诚
                      </div>
                    </a-col>
                    <a-col :span="24">
                      <div>
                        <span class="border-bottom"
                          >Negative prompt（反向提示词）:</span
                        >
                        &nbsp; 你可以输入一些你不想要出现在画面中的内容。
                      </div>
                      <div style="margin: 15px 0">
                        <span class="border-bottom"
                          >CFG Scale（引导系数）:</span
                        >
                        &nbsp;
                        提示词和画面的关联度，数值越大，画面越接近提示词。
                      </div>
                      <div style="margin: 15px 0">
                        <span class="border-bottom">Sampler（采样器）:</span>
                        &nbsp;
                        在创作时选择的采样器，不同采样器风格不同，有的是超现实，有的是艺术化。
                      </div>

                      <div>
                        <span class="border-bottom">Seed（种子）:</span> &nbsp;
                        AI绘画的种子数，一般为随机数，为了保证其他参数相同时，画面仍然会有变化。很少有工具可以设置种子数。
                      </div>
                    </a-col>
                  </a-row>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <div class="basic-structure">
        <div class="text words">优化描述词</div>
        <img src="../../common/image/line.png" />
      </div>
      <div class="group" style="padding-top: 50px">
        <a-row :gutter="[48, 16]">
          <a-col :span="24">
            <a-card class="card">
              <a-card-meta>
                <template #description>
                  <a-row class="words-list" :gutter="[16, 100]">
                    <ul>
                      <li class="padding-bottom">
                        先用简短的语句描述画面的主要内容&nbsp;&nbsp;&nbsp;
                        <span class="link-color">例如：一个亚马逊女战士</span>
                      </li>
                      <li class="padding-bottom">
                        在清晰描述主体的前提下，丰富画面细节的描述&nbsp;&nbsp;&nbsp;
                        <span class="link-color"
                          >例如：头戴羽毛，看向镜头，佩戴宝石</span
                        >
                      </li>
                      <li class="padding-bottom">
                        避免书写长句&nbsp;&nbsp;&nbsp;
                        <span class="link-color"
                          >例如：一个头戴羽毛佩戴宝石的亚马逊女战士看向镜头</span
                        >
                      </li>
                      <li class="padding-bottom">
                        用适当长度的描述词（50～100字），避免太少或太多，适当的描述词可以让画面充满细节，越靠后的描述词权重价值越低，容易被AI忽略
                      </li>
                    </ul>
                  </a-row>
                </template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </div>
      <div class="help">
        <div class="help-text">常见问题</div>
        <img src="../../common/image/icon_lin.png" />
      </div>
      <div class="problem">
        <ul>
          <li>
            如何获取绘画张数？
            <div class="sub-txt">
              开通绘画会员立即赠送绘画的张数，每分享一次AI绘画可以额外获得两张作图。
            </div>
          </li>
          <li>
            合规创作
            <div class="sub-txt">
              AI智能绘画出于善意和探索，为您的营销设计添加AI创造力。为了帮助您安全负责的使用绘画服务，我们采取了一些安全措施，包括但不限于对可能产生不当内容的内容进行自动审核等，如果您在使用中遇到了不安全或令人反感的内容，请通过客服告诉我们。
            </div>
          </li>
          <li>
            版权与商用
            <div class="sub-txt">
              AI智能绘画服务处于前沿探索阶段，您应当合法合规使用本服务，本服务生成的作品仅供个人学习交流使用，
              AI智能绘画对您的使用不做保证且不承担任何责任。
              在当下，AI生成作品的版权定义，在法律上是一个尚待定义的命题，有鉴于此，您将不拥有通过使用AI智能绘画服务所生成的作品的版权。
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, defineComponent } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import store from "../../store";

export default defineComponent({
  name: "ExploreAi",
  components: {},
  setup() {
    const state = reactive({
      count: 0,
      config: {},
      aiTxt: "",
    });

    const init = () => {
      store.dispatch("GetConfigInfo").then((config) => {
        if (config && config.basic && config.basic.system_name) {
          if (
            config.basic &&
            config.basic.system_name.slice(-2) &&
            config.basic.system_name.slice(-2) == "AI"
          ) {
            state.aiTxt = config.basic.system_name.slice(-2);
          }
          state.config = config;
        }
      });
    };
    init();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  min-width: 1800px;
  height: 100%;
  overflow: hidden auto;
  position: relative;
  .min-width {
    min-width: 2050px;
  }
  :deep(.ant-card-body) {
    height: auto;
    padding: 30px 55px;
  }
  :deep(.ant-card-cover) {
    height: 332px;
    overflow: hidden;
  }
  .title-box {
    position: absolute;
    top: 0;
    left: 350px;
    color: #fff;
    .title {
      margin-top: 80px;
      font-size: 24px;
    }
    .sub-title {
      color: #fff;
      font-size: 48px;
      font-weight: 700;
      margin-top: 50px;
    }
    .introduction {
      margin-top: 30px;
      font-size: 26px;
    }
  }
  .image {
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  .help {
    width: 100%;
    text-align: center;
    background: #000;
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    position: relative;
    margin: 0 auto;
    .help-text {
      position: absolute;
      top: -30px;
      left: 0;
      width: 100%;
    }
  }
  .group {
    width: 100%;
    background: #000;
    padding: 80px 350px;
    .card {
      border: 1px solid #122e4a;
      background: #121519;
      color: #fff;
      font-size: 20px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;

      .link-color {
        color: @link-color;
      }
      .image {
        // height: 260px;
      }
      .weight {
        color: #fff;
        // padding: ;
        padding-left: 150px;
        padding-top: 30px;
      }
      .sort-list {
        color: #fff;
        padding-top: 30px;
        padding-left: 400px;
        :deep(.ant-space-align-center) {
          align-items: baseline;
        }
        .left {
          font-weight: 700;
        }
        .main {
          font-size: 28px;
          color: #c0f374;
        }
        .particulars {
          color: #74dfd8;
        }
        .scene {
          font-size: 28px;
          color: #2a7efa;
        }
        .scene-details {
          color: #c0f374;
        }
        .picture-quality {
          font-size: 28px;
          color: #74dfd8;
        }
      }
      .study-list {
        color: #fff;
        .border-bottom {
          border-bottom: 3px solid #3ca3f7;
        }
        .particulars-icon {
          position: absolute;
          top: -20px;
          left: 20px;
          padding: 0px 20px;
          background: #3ca3f7;
          border-top-left-radius: 30px;
          border-top-right-radius: 30px;
          border-bottom-right-radius: 30px;
        }
        .particulars-icon2 {
          position: absolute;
          top: -20px;
          left: 50.2%;
        }
        .particulars-icon3 {
          position: absolute;
          top: 260px;
          left: 20px;
        }
      }
    }

    .description {
      color: #fff;
      font-size: 18px;
      margin-bottom: 15px;
      .left {
        color: #588bf1;
        font-weight: 600;
      }
      .left-bg-skyblue {
        color: #5df5ff;
      }
      .left-bg-green {
        color: #75d749;
      }
      .padding-right30 {
        padding-right: 30px;
      }
    }
    .words-list {
      padding-left: 100px;
      color: #fff;
      .padding-bottom {
        padding-bottom: 10px;
      }
    }
  }
  .painting {
    width: 100%;
    background: #000;
    padding: 80px 350px;
    color: #fff;
    .image-right {
      width: 490px;
      height: 320px;
      margin-right: 100px;
    }
    .image-left {
      width: 490px;
      height: 320px;
      margin-left: 100px;
    }
    .text {
      display: flex;
      align-items: center;
      font-size: 28px;
      font-weight: 700;
    }
    .text-right {
      padding-right: 10px;
    }
    .describe {
      font-size: 20px;
      margin: 30px 0;
    }
  }
  .become-text {
    position: absolute;
    top: -30px;
    left: 0%;
    width: 100%;
  }
  .basic-structure {
    background: #000;
    padding: 45px 350px;
    // padding-bottom: 0px;
    padding-top: 50px;
    color: #fff;
    text-align: center;
    position: relative;
    .text {
      font-size: 29px;
      font-weight: 600;
      position: absolute;
      top: 5px;
      left: 44.6%;
    }
    .basic {
      top: 17px;
      left: 44.5%;
    }
    .lin {
      width: 306px;
      height: 12px;
      background: inherit;
      background-color: rgba(60, 163, 247, 1);
      border: none;
      border-radius: 10px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
      box-shadow: none;
      margin-left: 39%;
    }

    .weight {
      left: 46%;
      top: 50px;
    }
    .study {
      left: 44%;
      top: 50px;
    }
    .words {
      left: 47%;
      top: 50px;
    }
  }
  .basic-structure-list {
    padding: 0px 350px;
    padding-bottom: 0px;
    padding-top: 20px;
    .icon {
      font-size: 32px;
      color: #74dfd8;
      font-weight: 800;
    }
    .list {
      width: 140px;
      height: 48px;
      background: inherit;
      background-color: rgba(192, 243, 116, 1);
      border: none;
      border-radius: 10px;
      color: #000;
      font-size: 18px;
      text-align: center;
      line-height: 48px;
    }
    .bg-skyblue {
      background-color: rgba(116, 223, 216, 1);
    }
    .bg-blue {
      background-color: rgba(42, 126, 250, 1);
    }
  }
  .problem {
    background: #000;
    padding: 45px 400px;
    font-size: 28px;
    color: #fff;
    .sub-txt {
      font-size: 18px;
      padding: 20px 0;
      color: #d7d7d7;
    }
  }
}
</style>
